<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="filter-container">
      <el-row :gutter="0">
        <el-col :xs="24" :sm="12">
          <el-select class="filter-item" v-model="banjiId" placeholder="请选择班级" @change='handlBanjiSelect'>
            <el-option
              v-for="item in banjis"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>

          <el-button class="filter-item" @click="refresh()">刷新</el-button>
        </el-col>
        <el-col :xs="24" :sm="12" style="text-align:right;">
          <el-button class="filter-item" @click="init()" type="primary" icon="el-icon-s-help">账号初始化</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 列表 -->
    <el-table ref="multipleTable" v-loading="loading" :data="datas" :height="height" style="width: 100%" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" min-width="55" sortable="custom"/>
      <el-table-column prop="xh" label="学号" min-width="100" sortable="custom"/>
      <el-table-column prop="name" label="姓名" min-width="100" sortable="custom"/>
      <el-table-column prop="sex" label="性别" min-width="50" sortable="custom"/>
      <el-table-column prop="beizhu2" label="备注2" min-width="80" sortable="custom"/>
      <el-table-column prop="beizhu1" label="备注1" min-width="80" sortable="custom"/>
      <el-table-column label="操作" min-width="100" align="right" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="success" @click="chengji(row)">成绩汇总</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import screenHeight from '@/utils/screen-height'
import { listBanjiByBzrUserId,listStudentByBanjiId,init } from '@/api/mystudent'

export default {
  name: 'MyStudent',
  data() {
    return {
      height: 680,
      loading: false,
      datas: [],
      banjis:[],
      banjiId:'',
      multipleSelection: [],
    }
  },
  created() {
    this.height = screenHeight()
    this.listBanjis()
    //this.list()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    init() {
      let checkArr = this.multipleSelection;   // multipleSelection存储了勾选到的数据
      let params = [];
      let self = this;
      checkArr.forEach(function (item) {
        params.push(item.id);       // 添加所有需要删除数据的id到一个数组，post提交过去
      });
      this.loading = true
      init(params).then(res=>{
        this.$refs.multipleTable.clearSelection();
        this.list();
        this.$message.success(res.msg)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handlBanjiSelect(){
      this.list();
    },
    listBanjis() {
      this.loading = true
      listBanjiByBzrUserId().then(res => {
        this.banjis = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 列表
    list() {
      this.loading = true
      listStudentByBanjiId({banji_id:this.banjiId}).then(res => {
        this.datas = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 查询
    search() {
      this.list()
    },
    // 刷新
    refresh() {
      this.list()
    },
    chengji(row){
      this.$router.push({path: '/chengji/MyStudentKaoshiChengjiHuizong', query: {student_id: row.id,student_name:row.name}})
      return false
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
